import { Button, Form, Input, Select, Table, TreeSelect } from 'antd';
import { SettingOutlined } from '@ant-design/icons'
import React, { useEffect, useState,useRef } from 'react';
import Styles from "./../../assets/styles/shoptype.module.less"
<<<<<<< HEAD
import { getShopType, getShop ,delShop} from '../../apis/shop'
import Addshop from '../../components/Addshop';
import qs from "querystring"
=======
import { getShopType, getShop } from '../../apis/shop'
import Addshop from '../../components/Addshop';
import ChaneShop from "../../components/ChaneShop"
import qs from "querystring"


>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40


const { Option } = Select;

export default function Shop() {
  useEffect(() => {
    fetchData()
    allGoods()
  }, [])

  const fetchData = async () => {
    const res = await getShopType()

    settreeData(res.data.rows.children)
  }
  const [totals, setTotals] = useState()

  const allGoods = async (e) => {
    const res = await getShop()
    // console.log(res)
    setTotals(res.data.total)
    setData(res.data.rows)
  }
<<<<<<< HEAD
  
=======

>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
  const [form] = Form.useForm();
  const [, forceUpdate] = useState({});
  const [checkStrictly, setCheckStrictly] = useState(false);
  const [data, setData] = useState([])

<<<<<<< HEAD
  const onFinish = (values) => {
    // console.log(values);
=======
  const onFinish = async (values) => {
    console.log(values);
    const res = await getShop(values)
    const data = res.data.rows

>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
  };

  const [value, setValue] = useState(undefined);
  const onChange = (newValue) => {
    setValue(newValue);
  };
  const [treeData, settreeData] = useState([])


  //表格
  const columns = [
    {
      title: '图片',
      dataIndex: "photo",
      key: 'photo',
      fixed: 'left',
      width: 80,
      // eslint-disable-next-line no-undef
      render: (record) => <img src={record} alt="" width="50px" />
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
      width: 500
    },
    {
      title: '商品类型',
      dataIndex: 'gname',
      key: 'gname',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (a) => {
        if (a == 1) {
          return <span>上架</span>
<<<<<<< HEAD
        } else {
=======
        } else if (a == "2") {
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
          return <span>下架</span>
        }
      }
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      width: 100,
    },
    {
      title: '数量',
      dataIndex: 'counts',
      key: 'counts',
      width: 100,
    },
    {
      title: '点赞数',
      dataIndex: 'likes',
      key: 'likes',
      width: 100,
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      width: 100,
<<<<<<< HEAD
      render: (a) => <div onClick={() => delInf(a)}><SettingOutlined></SettingOutlined></div>,
=======
      render: (inf) => <a><ChaneShop inf={inf} updata={updata}></ChaneShop></a>,
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
    },
    {
      title: '秒杀',
      dataIndex: 'pid',
      key: 'pid',
      width: 100,
      render: (a) => {
        if (a == 1) {
          return <Button>加入秒杀</Button>
        } else {
          return <Button>关闭秒杀</Button>
        }
      }
    },
  ];
  // const [num,setNum]=useState(1)
  const onChangePag = async (e, h) => {
    // console.log(e, h);
    const pages = qs.stringify({ pageSize: h, pageNum: e })
    const res = await getShop(pages)
    setData(res.data.rows)

  }
<<<<<<< HEAD
  const [id, setID] = useState('')
=======

  const getNewInf = (inf) => {
    if (inf == 1) {
      allGoods()
    }
  }
  const updata = (inf) => {
    if (inf == 1) {
      allGoods()
    }
  }
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setID(selectedRowKeys.join())

    },
    onSelect: (record, selected, selectedRows) => {
      // console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      // console.log(selected, selectedRows, changeRows);
    },
  };
<<<<<<< HEAD
  //
  const delInf = (a) => {
    // console.log(a);
  }
    //删除
    const delMsg = async () => {
      const res = await delShop(id)
      // console.log(res)
      allGoods()
    }


      //重置
  const clearForm = useRef()
  const resetting = () => {
    clearForm.current.resetFields()
=======
  //删除
  const delInf = (a) => {
    // console.log(a);
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
  }
  return (
    <div>
      <>
        <div className={Styles.headerOne}>
          <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish} ref={clearForm}>
            <Form.Item
              name="name"
              label="商品类型名称:"
            >
              <Input placeholder="" />
            </Form.Item>
            <Form.Item
              name="state"
              label="状态"
              style={{ width: "120px" }}
            >
              <Select
                placeholder=""
                allowClear
              >
                <Option value="0">启用</Option>
                <Option value="1">停用</Option>
              </Select>

            </Form.Item>
            <Form.Item
              name="shoptype"
              label="商品类型"
              style={{ width: "200px" }}
            >
              <TreeSelect
                showSearch
                style={{
                  width: '100%',
                }}
                value={value}
                dropdownStyle={{
                  height: 200

                }}
                placeholder="Please select"
                allowClear
                onChange={onChange}
                treeData={treeData}
              />

            </Form.Item>
            <div className={Styles.findOne}>
              <Form.Item shouldUpdate>
                {() => (
                  <Button type="primary" htmlType="submit" className={Styles.find}>
                    查询
                  </Button>
                )}
              </Form.Item>
              <Button className={Styles.findTwo}  onClick={resetting}>重置</Button>
            </div>

          </Form>
        </div>
        {/* 新增抽屉 */}
        <div style={{ display: "flex", flexDirection: "row" }}>
<<<<<<< HEAD
          <div><Addshop></Addshop></div>
          <div style={{ marginLeft: "20px" }}  onClick={delMsg}><Button>删除</Button></div>
=======
          <div><Addshop getNewInf={getNewInf}></Addshop></div>
          <div style={{ marginLeft: "20px" }}><Button>删除</Button></div>
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
        </div>
        <div style={{ marginTop: "20px" }}>
          <Table
            columns={columns}
            rowSelection={{
              ...rowSelection,
              checkStrictly,
            }}
            dataSource={data}
            bordered
            rowKey="id"
            pagination={{
              total: totals,
              pageSize: 10,
              pageSizeOptions: [5, 10, 15],
              showSizeChanger: true,
              showQuickJumper: true,
              onChange: onChangePag
            }}
            size="small"
            scroll={{
              x: 1200,
            }}
          />
        </div>
      </>
    </div>
  )
}